<template>
    <div class="basemap-container">
         <div class="left-panel" v-if="visible">
            <div :class="[item[0] === selectedLayer  ? 'active' : '', 'img']" 
                v-for="item in baseLayers" 
                :key="item" 
                @click="changeLayer(item)"
            >
                <img :src="`../imgs/${item[0]}.png`" />
                <span>{{ item[0] }}</span>
            </div>
         </div>
         <div class="right-panel" @click="handleIconClick">
            <svg-icon name="map" width="25px" height="25px"></svg-icon>
         </div>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import SvgIcon from '@/components/SvgIcon.vue';
import { useBaseLayersStore } from '@/stores/baseLayers';


const baseLayersStore = useBaseLayersStore()
const baseLayers = baseLayersStore.baseLayers

const visible = ref(false);
const selectedLayer = ref("矢量地图");
const handleIconClick = () => {
    visible.value = !visible.value;
};

const changeLayer = (item) => {
    for (let layer of baseLayers) {
        if (layer[0] === item[0]) {
            layer[1].setVisible(true);
            selectedLayer.value = item[0];
        }
        else {
            layer[1].setVisible(false);
        }
    }
}


</script>

<style scope>
.basemap-container {
    position: absolute;
    bottom: 6vh;
    right: 2vw;
}
.right-panel {
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    background-color: #f8f0f0;
}
.left-panel {
    cursor: pointer;
    display: flex;
    position: absolute;
    top: -30px;
    right: 50px;
    background-color: #e9e7e7;
    /* padding: 20px; */
}
.img {
    /* width: 70px; */
    margin: 10px;
    /* background-color: red; */
    font-size: 14px;
    text-align: center;
}
.active {
    color: skyblue;
    border: 1px solid skyblue;
}
</style>